<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="../../zxt/zxt.js"></script>
		<script>
			importZXT("../../zxt");
		</script>
	</head>

	<body>
		<input id="user" />
		<img src="../../zxt/images/zxt_keyboard_icon.jpg" onclick="onclick4Input(this)"/>

		<input id="pwd" />
		<img src="../../zxt/images/zxt_keyboard_icon.jpg" onclick="onclick4Password(this)"/>

		<div id="text" zxt="zxt.ui.Textbox" zxt.required="false"  zxt.tip="Your Email Address" zxt.type="email" style="width:400px" ></div>
		<img src="../../zxt/images/zxt_keyboard_icon.jpg" onclick="onclick4Textbox(this)"/>

		<div id="cardidbox" style="width:400px"></div>
		<img src="../../zxt/images/zxt_keyboard_icon.jpg" onclick="onclick4Cardidbox(this)" />
		<br/>

		<div id="combobox" zxt="zxt.ui.Combobox" zxt.required="true" zxt.options="a:1,b:2,c:3" zxt.chooseonly="false"></div>
		<img src="../../zxt/images/zxt_keyboard_icon.jpg" onclick="onclick4Combobox(this)" />
		<br/>
		<div>
			<a href="../index.html">返回</a>
		</div>
	</body>
</html>

<script>
	$zxt.init();

	var user = document.getElementById("user");
	var pwd = document.getElementById("pwd");

	var box = new zxt.ui.Cardidbox("true", "cardID");
	$zxt.register(box, "cardidbox");
	$("#cardidbox").append(box.render());

	var text = $zxt.getComponent("text");
	var combobox = $zxt.getComponent("combobox");

	var kb = new zxt.ui.Keyboard();
	$zxt.register(kb, "kb1");

	var kb2 = new zxt.ui.Keyboard();
	$zxt.register(kb2, "kb2");

	function onclick4Input(dom) {
		//kb.onkeydown=function(k){
		//	user.value = user.value + k;
		//};
		kb.show(user, dom, 3);
	};

	function onclick4Password(dom) {
		kb2.onkeydown = function(k) {
			pwd.value = pwd.value + k;
		};
		kb2.show(pwd, dom, 1);
	};

	function onclick4Textbox(dom) {
		//kb.onkeydown=function(k){
		//	var val = $zxtUI.text1.getValue() + k;
		//	$zxtUI.text1.setValue(val);
		//	$zxtUI.text1.render();
		//};
		kb.show(text, dom);
	}

	function onclick4Cardidbox(dom) {
		//kb.onkeydown=function(k){
		//	var val = box.getValue() + k;
		//	box.setValue(val);
		//	box.render();
		//};
		kb.show(box, dom);
	}

	function onclick4Combobox(dom) {
		//kb.onkeydown=function(k){
		//	var val = $zxtUI.combobox2.getValue() + k;
		//	$zxtUI.combobox2.setValue(val);
		//	$zxtUI.combobox2.render();
		//};
		kb.show(combobox, dom);
	}
</script>

